<template>
  <div class="page">
    <div class="context">
      <div class="title_1" style="cursor: pointer" @click.stop="handleShowFilterTags">
        筛选顾客
        <i v-if="clerkFilter.dataLoading" class="el-icon-loading"></i>
        <i v-else-if="clerkFilter.popMe" class="el-icon-arrow-down"></i>
        <i v-else class="el-icon-arrow-right"></i>
      </div>
      <div v-if="clerkFilter.popMe" class="title_1_ctx2">
        <table style="margin-left: -2px">
          <tr style="vertical-align: top">
            <td>
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">分组标签</div>
              </div>
            </td>
            <td>
              <div class="tag_list">
                <div v-for="tag in tagsGroupList" class="tag_item">
                  <div class="tag_name">
                    <el-checkbox v-model="tag.checked" @change="onClickTagItem(tag)">{{ tag.tag }}</el-checkbox>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <!-- 需求变动, 性格标签要分组了; 代码先留着, 万一哪天需求又改回来了呢
      <div v-if="clerkFilter.popMe" class="title_1_ctx1">
        <div class="title_2">
          <div class="title_icon"></div>
          <div class="title_name">性格标签</div>
        </div>
        <div class="title_1_ctx1_1">
          <table style="vertical-align: top">
            <tr v-for="item in tagsXingGe" style="vertical-align: top">
              <td class="tag_class">{{ item.name }}</td>
              <td>
                <div class="tag_list">
                  <div v-for="tag in item.tags" class="tag_item">
                    <div class="tag_name">
                      <el-checkbox v-model="tag.checked" @change="onClickTagItem(tag)">{{ tag.tag }}</el-checkbox>
                    </div>
                    <div class="tag_count">{{ tag.count }}</div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      -->
      <div v-if="clerkFilter.popMe" class="title_1_ctx2">
        <table style="margin-left: -2px">
          <tr>
            <td>
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">信任标签</div>
              </div>
            </td>
            <td>
              <el-radio-group
                v-model="tagsRadioGroup.XinRen"
                class="tag_list"
                @input="onTagRadioChange(tagsCodeOnWeb.XinRen)">
                <el-radio v-for="item in tagsXinRen" class="tag_item" :label="item.id">
                  {{ item.tag }}
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
        </table>
      </div>
      <div v-if="clerkFilter.popMe" class="title_1_ctx2">
        <table style="margin-left: -2px">
          <tr style="vertical-align: top">
            <td>
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">兴趣标签</div>
              </div>
            </td>
            <td>
              <div class="tag_list">
                <div v-for="tag in tagsXingQu" class="tag_item">
                  <div class="tag_name">
                    <el-checkbox v-model="tag.checked" @change="onClickTagItem(tag)">{{ tag.tag }}</el-checkbox>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div v-if="clerkFilter.popMe" class="title_1_ctx1">
        <div class="title_2">
          <div class="title_icon"></div>
          <div class="title_name">消费标签</div>
        </div>
        <div class="title_1_ctx1_1">
          <table>
            <tr>
              <td class="tag_class">消费能力</td>
              <td>
                <el-radio-group
                  v-model="tagsRadioGroup.XfNengli"
                  class="tag_list"
                  @input="onTagRadioChange(tagsCodeOnWeb.XfNengli)">
                  <el-radio v-for="item in tagsXfNengli" class="tag_item" :label="item.id">{{ item.tag }}</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr v-for="item in tagsXiaoFei">
              <td class="tag_class">{{ item.name }}</td>
              <td>
                <div class="tag_list">
                  <div v-for="tag in item.tags" class="tag_item">
                    <div class="tag_name">
                      <el-checkbox v-model="tag.checked" @change="onClickTagItem(tag)">{{ tag.tag }}</el-checkbox>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="tag_class">消费等级</td>
              <td>
                <el-radio-group
                  v-model="tagsRadioGroup.XfDengJi"
                  class="tag_list"
                  @input="onTagRadioChange(tagsCodeOnWeb.XfDengJi)">
                  <el-radio v-for="item in tagsXfDengJi" class="tag_item" :label="item.id">{{ item.tag }}</el-radio>
                </el-radio-group>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div v-if="clerkFilter.popMe" class="title_1_ctx2">
        <table style="margin-left: -2px">
          <tr>
            <td>
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">顾客年龄</div>
              </div>
            </td>
            <td>
              <el-radio-group
                v-model="tagsRadioGroup.NianLing"
                class="tag_list"
                @input="onTagRadioChange(tagsCodeOnWeb.NianLing)">
                <el-radio v-for="item in tagsNianLing" class="tag_item" :label="item.id">{{ item.tag }}</el-radio>
              </el-radio-group>
            </td>
          </tr>
        </table>
      </div>
      <div v-if="clerkFilter.popMe" class="title_1_ctx2">
        <table style="margin-left: -2px">
          <tr>
            <td>
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">顾客生日</div>
              </div>
            </td>
            <td>
              <el-radio-group v-model="tagsRadioGroup.birthdayMonth" class="tag_list">
                <el-radio class="tag_item" :label="0" size="mini">不筛选生日</el-radio>
                <el-radio class="tag_item" :label="1" size="mini">本月过生日</el-radio>
                <el-radio class="tag_item" :label="2" size="mini">下月过生日</el-radio>
              </el-radio-group>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!--已选择的标签-->
    <div class="title_1_ctx2" style="padding: 5px 10px 0 20px">
      <table style="margin-left: -2px">
        <tr style="vertical-align: top">
          <td>
            <div class="title_2">
              <div style="width: 4px; height: 13px"></div>
              <div class="title_name" style="color: #724eff">已选标签</div>
            </div>
          </td>
          <td>
            <div class="tag_list">
              <div v-for="tag in allSelectedTags" class="tag_item">
                <div class="tag_name tag_selected">
                  {{ tag.tag }}
                  <i class="el-icon-close" style="cursor: pointer" @click.stop="onSelectRemove(tag)"></i>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>

    <!--添加活动信息-->
    <div class="context" style="margin-top: 20px; position: relative; padding-bottom: 25px">
      <div class="title_1">添加活动</div>
      <table class="act_info">
        <tr>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动类型</div>
              </div>
              <div class="title_1_ctx1_1">
                <table>
                  <tr>
                    <td>
                      <el-radio-group v-model="actVo.scheme" class="tag_list">
                        <el-radio class="tag_item" :label="1">沙龙</el-radio>
                        <el-radio class="tag_item" :label="2">客情</el-radio>
                        <el-radio class="tag_item" :label="3">生日</el-radio>
                        <el-radio class="tag_item" :label="-1">其他</el-radio>
                      </el-radio-group>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动负责人</div>
              </div>
              <div class="title_1_ctx1_1">
                <el-select v-model="actKeeper" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in actKeepers"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动方案</div>
              </div>
              <div class="title_1_ctx1_1">
                <el-upload
                  action="/"
                  :before-upload="handleFileBeforeUpload"
                  :on-progress="handleFileUploading"
                  :on-success="handleFileUploadOk"
                  :on-error="handleFileUploadError"
                  :http-request="handleFileUpload"
                  :file-list="actFileList"
                  :auto-upload="true"
                  :multiple="false"
                  :disabled="actCreate.proposalUploading"
                  accept=".png,.jpg,.jpeg,.doc,.docx,.xls,.xlsx,.txt,.pdf">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传 pdf/txt/doc/docx/xls/xlsx/jpg/png 文件, 且不超过20M
                  </div>
                </el-upload>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动预算</div>
              </div>
              <div class="title_1_ctx1_1">
                <el-input-number
                  v-model="actVo.budget"
                  :precision="2"
                  :step="100.0"
                  :max="9999999"
                  :min="0"
                  size="small"></el-input-number>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2" style="width: 100%">
                <div class="title_icon"></div>
                <div class="title_name">活动时间</div>
                <div>
                  <el-radio-group v-model="actType" class="no_flex" style="display: flex; align-items: center">
                    <el-radio :label="1" style="margin: 0px 5px 0px 5px">固定</el-radio>
                    <el-radio :label="2">时间段</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="title_1_ctx1_1">
                <el-date-picker
                  v-model="actDate"
                  type="date"
                  size="small"
                  placeholder="选择日期"
                  :picker-options="{ disabledDate: actDisabledDate }"></el-date-picker>
                <div v-if="actType == 2" class="act_times">
                  <div style="width: 50%">
                    <el-time-select
                      v-model="actStart"
                      size="mini"
                      clearable
                      style="width: 110px"
                      :picker-options="{
                        start: '09:00',
                        step: '00:15',
                        end: '21:45',
                      }"
                      placeholder="开始时间"></el-time-select>
                  </div>
                  <div style="width: 50%">
                    <el-time-select
                      v-model="actEnd"
                      size="mini"
                      clearable
                      style="width: 110px"
                      :picker-options="{
                        start: '09:15',
                        step: '00:15',
                        end: '22:00',
                      }"
                      placeholder="结束时间"></el-time-select>
                  </div>
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动简介</div>
              </div>
              <div class="title_1_ctx1_1" style="width: 100%">
                <el-input
                  v-model="actVo.plan"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入活动方案或简介"></el-input>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">选择顾客</div>
              </div>
              <div class="title_1_ctx2">
                <el-input
                  v-model="clerkTable.searchName"
                  size="mini"
                  clearable
                  style="width: 180px"
                  placeholder="模糊查询顾客姓名"
                  prefix-icon="el-icon-search"></el-input>
                <el-button v-if="clerkTable.dataListLoading" size="mini" type="success" disabled icon="el-icon-loading">
                  搜索顾客
                </el-button>
                <el-button v-else size="mini" type="success" @click.stop="loadClerkList">搜索顾客</el-button>
              </div>
              <div class="title_1_ctx1_1" style="width: 82vw">
                <!--顾客列表-->
                <el-table
                  ref="refClerkTable"
                  v-loading="clerkTable.dataListLoading"
                  :data="clerkTable.dataList"
                  element-loading-text="Loading"
                  border
                  fit
                  highlight-current-row>
                  <!-- <el-table-column fixed type="selection" width="55"></el-table-column> -->
                  <el-table-column fixed prop="cname" label="顾客姓名" align="center" width="100"></el-table-column>
                  <el-table-column fixed label="性别" align="center" width="80">
                    <template slot-scope="{ row }">
                      <div v-if="row.sex === 2">其他</div>
                      <div v-if="row.sex === 1">女</div>
                      <div v-if="row.sex === 0">男</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="信任等级" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.trust2 === 3">已信任</div>
                      <div v-if="row.trust2 === 2">已破冰</div>
                      <div v-if="row.trust2 === 1">未破冰</div>
                      <div v-if="row.trust2 === 0">未设置</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="消费能力" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.bg2 === 3">没钱</div>
                      <div v-if="row.bg2 === 2">普通</div>
                      <div v-if="row.bg2 === 1">有钱</div>
                      <div v-if="row.bg2 === 0">超有钱</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="消费等级" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.grade === 4">S级</div>
                      <div v-if="row.grade === 3">A级</div>
                      <div v-if="row.grade === 2">B级</div>
                      <div v-if="row.grade === 1">C级</div>
                      <div v-if="row.grade === 0">未定</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="运营" align="center" width="80">
                    <template slot-scope="{ row }">
                      <span v-if="row.dengji === 3">放弃</span>
                      <span v-if="row.dengji === 2" style="color: #f56c6c">失速</span>
                      <span v-if="row.dengji === 1" style="color: #e6a23c">预警</span>
                      <span v-if="row.dengji === 0" style="color: #67c23a">正常</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" align="center" width="120" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      {{ row.createTime ? row.createTime.substring(0, 10) : '' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="kname" label="所属管家" align="center" width="160"></el-table-column>
                  <el-table-column
                    prop="sname"
                    label="所属门店"
                    align="center"
                    width="300"
                    show-overflow-tooltip></el-table-column>
                  <el-table-column prop="solar" label="出生日期" align="center" width="160"></el-table-column>
                  <el-table-column prop="ccode" label="顾客编号" align="center" width="180"></el-table-column>
                  <el-table-column fixed="right" align="center" width="200">
                    <template slot="header">
                      <el-button type="primary" size="mini" plain @click.stop="goActClerkAddAll">本页全选</el-button>
                      <el-button type="danger" size="mini" plain @click.stop="goActClerkRemoveAll">本页全删</el-button>
                    </template>
                    <template slot-scope="scope">
                      <div v-if="isClerkSelected(scope.row.id)">
                        <el-button type="success" size="mini" disabled plain>已选择</el-button>
                        <el-button type="danger" size="mini" plain @click.stop="goActClerkRemove(scope.row)">
                          移除
                        </el-button>
                      </div>
                      <div v-else>
                        <el-button type="primary" size="mini" plain @click.stop="goActClerkAdd(scope.row)">
                          添加
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>

                <pagination
                  v-show="clerkTable.total > 0"
                  :total="clerkTable.total"
                  :page.sync="clerkTable.pageParam.page"
                  :limit.sync="clerkTable.pageParam.limit"
                  @pagination="loadClerkList"></pagination>
              </div>
            </div>
          </td>
        </tr>
      </table>

      <div class="commit">
        <el-button v-if="actCreate.creating" type="primary" disabled icon="el-icon-loading">确认创建</el-button>
        <el-button v-else type="primary" @click.stop="goActCreate">确认创建</el-button>
        <el-button type="info" @click.stop="handleClosePage">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import * as actApi from '@/api/activity';
import * as admApi from '@/api/admin';
import * as tgpApi from '@/api/tags_group';
import Pagination from '@/components/Pagination';
import TagGategory from '@/utils/enum/tag-gategorys';
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'ClerkFilter',
  components: { Pagination },
  data() {
    return {
      tagsXingGe: [], // 性格标签 {name:'行动', tags:[]}
      tagsXinRen: [], // 信任标签 {tag}
      tagsXingQu: [], // 兴趣标签 {tag}
      tagsXiaoFei: [], // 消费标签  {name:'消费能力', tags:[]}
      tagsXfNengli: [], // 消费能力 {tag}
      tagsXfDengJi: [], // 消费等级 {tag}
      tagsNianLing: [], // 年龄段筛选 {tag}
      tagsGroupList: [], // 标签分组列表 {id:'gp_1', groupName:'', tags:['',''], count:0, checked:false, isGroup:true}
      tagsCodeOnWeb: {
        XinRen: -101, // UI上使用的编码: 信任
        XfNengli: -102, // UI上使用的编码: 消费能力
        XfDengJi: -103, // UI上使用的编码: 消费等级
        NianLing: -104, // UI上使用的编码: 年龄段
      },
      tagsRadioGroup: {
        XinRen: undefined, // 已选择: 信任
        XfNengli: undefined, // 已选择: 消费能力
        XfDengJi: undefined, // 已选择: 消费等级
        NianLing: undefined, // 已选择: 年龄段
        birthdayMonth: 0, // 查询过生日的顾客, 0: 不做查询; 1: 这个月过生日; 2: 下个月过生日
      },
      actDate: undefined,
      actStart: '09:00',
      actEnd: undefined,
      actType: 1,
      actFileList: [],
      actKeeper: undefined,
      actKeepers: [],
      clerkFilter: {
        // 顾客标签筛选区域
        popMe: false,
        dataLoading: false,
      },
      refClerkTable: undefined,
      clerkTable: {
        // 筛选的顾客列表
        dataList: [],
        dataListLoading: false,
        total: 0,
        pageParam: { page: 1, limit: 10 },
        selectedClerks: [],
        searchName: '',
      },
      actCreate: {
        // 创建活动区域
        proposalUploading: false,
        creating: false,
      },
      actVo: {
        sid: null, // 门店主键ID
        kid: null, // 活动负责人ID
        kname: null, // 负责人名字
        scheme: null, // 活动类型
        budget: 0.0, // 活动经费预算
        plan: null, // 简单的计划(文字描述)
        planAudio: null, // 简单的计划(语音描述)
        proposal: null, // 详细的计划(文档或者图片)
        start: null, // 活动开始时间, yyyy-MM-dd HH:mm:ss, 只选了日期的活动, 默认 9 点开始
        end: null, // 活动结束时间, yyyy-MM-dd HH:mm:ss
        score: null, // 活动结束后打分, 有打分(>0), 表示活动已完成
      },
      allSelectedTags: [], // {id:xxx} 用 id 属性判断标签是否被选中; 包含 radio 选择
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  mounted() {
    this.loadAllKeepers();
    this.loadAllTags();
  },
  methods: {
    handleShowFilterTags() {
      if (this.clerkFilter.dataLoading) {
        return;
      }
      this.clerkFilter.popMe = !this.clerkFilter.popMe;
    },
    handleClosePage(val) {
      if (!val) {
        this.$emit('closed', 'click');
      } else {
        this.$emit('closed', 'list');
      }
    },
    handleFileBeforeUpload(file) {
      const allowFileTypes = ['jpg', 'jpeg', 'png', 'txt', 'pdf', 'doc', 'docx', 'xlsx', 'xls'];
      const fileType = file.name.split('.').pop().toLowerCase();
      if (allowFileTypes.indexOf(fileType) === -1) {
        MessageBox.alert('只能上传指定格式的文件!');
        return false;
      }
      return true;
    },
    handleFileUploading(event, file, fileList) {
      this.actCreate.proposalUploading = true;
    },
    handleFileUploadOk(res, file, fileList) {
      this.actCreate.proposalUploading = false;
      MessageBox.alert('文件上传完成');
    },
    handleFileUploadError(err, file, fileList) {
      this.actCreate.proposalUploading = false;
    },
    handleFileUpload: async function (options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('id', this.openId);
      formData.append('file', file);
      await actApi
        .uploadActProposal(formData)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert('文件上传失败: ' + res.data.message);
            } else {
              MessageBox.alert('文件上传失败!');
            }
            return;
          }
          this.actVo.proposal = res.data.data;
        })
        .catch(err => {
          MessageBox.alert('文件上传失败!');
        })
        .finally(() => {
          this.actCreate.proposalUploading = false;
        });
    },
    isClerkSelected(id) {
      let select = false;
      this.clerkTable.selectedClerks.forEach(k => {
        if (select) {
          return;
        }
        if (k.id === id) {
          select = true;
          return;
        }
      });
      return select;
    },
    goActClerkAddAll() {
      this.clerkTable.dataList.forEach(x => this.goActClerkAdd(x));
    },
    goActClerkRemoveAll() {
      this.clerkTable.dataList.forEach(x => this.goActClerkRemove(x));
    },
    goActClerkAdd(row) {
      const idx = this.clerkTable.selectedClerks.findIndex(x => x.id === row.id);
      if (idx === -1) {
        this.clerkTable.selectedClerks.push(row);
      }
    },
    goActClerkRemove(row) {
      const idx = this.clerkTable.selectedClerks.findIndex(x => x.id === row.id);
      if (idx !== -1) {
        this.clerkTable.selectedClerks.splice(idx, 1);
      }
    },
    actDisabledDate(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const oneYearLater = new Date(today);
      oneYearLater.setFullYear(today.getFullYear() + 1);
      return !(date - today >= 0 && date - oneYearLater < 0);
    },
    goActCreate: async function () {
      if (!this.openId) {
        MessageBox.alert('你不属于任何门店');
        return;
      }
      if (this.actVo.scheme === null || this.actVo.scheme === undefined) {
        MessageBox.alert('请选择活动类型');
        return;
      }
      if (this.actKeeper === null || this.actKeeper === undefined) {
        MessageBox.alert('请选择活动负责人');
        return;
      }
      this.actVo.sid = this.openId;
      this.actVo.kid = this.actKeeper;
      const keeper = this.actKeepers.find(x => x.value === this.actVo.kid);
      if (keeper === undefined) {
        MessageBox.alert('请选择活动负责人');
        return;
      }
      this.actVo.kname = keeper.label;
      if (!this.actDate && this.actVo.scheme !== 3) {
        MessageBox.alert('请选择活动日期');
        return;
      }
      if (!this.actVo.plan && !this.actVo.proposal) {
        MessageBox.alert('请上传活动方案, 或者填写活动简介');
        return;
      }
      if (this.actVo.scheme === 3) {
        // 生日活动
        const now = new Date();
        switch (this.tagsRadioGroup.birthdayMonth) {
          case 0:
            MessageBox.alert('活动类型为生日时, 必须搜索指定月份过生日的顾客');
            return;
          case 1:
            now.setDate(1);
            now.setHours(9, 0, 0, 0);
            this.actVo.start = now.format('yyyy-MM-dd HH:mm:ss');
            break;
          case 2:
            now.setDate(1);
            now.setMonth(now.getMonth() + 1);
            now.setHours(9, 0, 0, 0);
            this.actVo.start = now.format('yyyy-MM-dd HH:mm:ss');
            break;
        }
      } else {
        // 其他活动
        if (this.actType === 1) {
          const copyDate = new Date(this.actDate);
          copyDate.setHours(9, 0, 0, 0);
          this.actVo.start = copyDate.format('yyyy-MM-dd HH:mm:ss');
        } else {
          const now = new Date();
          const actDay = this.actDate.format('yyyy-MM-dd');
          this.actVo.start = actDay + ' ' + this.actStart + ':00';
          const dts = new Date(this.actVo.start);
          if (dts - now <= 180000) {
            MessageBox.alert('开始时间必须在 10 分钟以后');
            return;
          }
          if (this.actEnd) {
            this.actVo.end = actDay + ' ' + this.actEnd + ':00';
            const dte = new Date(this.actVo.end);
            if (dte - dts < 900000) {
              MessageBox.alert('结束时间必须在开始时间的 15 分钟以后');
              return;
            }
          }
        }
      }

      const selectedClerkIds = this.clerkTable.selectedClerks.map(x => x.id);
      if (selectedClerkIds.length === 0) {
        MessageBox.confirm('没有选择任何顾客, 是否确认添加该活动?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.doCreateActivity(this.actVo, selectedClerkIds);
        });
      } else {
        this.doCreateActivity(this.actVo, selectedClerkIds);
      }
    },
    doCreateActivity: async function (act, clerkIds) {
      this.actCreate.creating = true;
      await actApi
        .activityCreate(act)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert('创建活动失败');
            return;
          }
          if (clerkIds.length === 0) {
            MessageBox.alert('创建活动成功');
            this.handleClosePage(1);
            return;
          }
          const actClerkVo = { id: res.data.data, clerkIds: clerkIds };
          const errAlertMsg = '创建活动成功, 但将保存活动的顾客列表失败, 请到活动列表页面重新选择顾客';
          actApi
            .activityAddClerks(actClerkVo)
            .then(res => {
              if (res.data.status !== apiSts.ResponseOK) {
                MessageBox.alert(errAlertMsg);
                return;
              }
              MessageBox.alert('创建活动成功');
              this.handleClosePage(1);
            })
            .catch(err => {
              MessageBox.alert(errAlertMsg);
            });
        })
        .finally(() => {
          this.actCreate.creating = false;
        });
    },
    onSelectRemove(tag) {
      if (!tag) {
        return;
      }
      let idx = undefined;
      if (tag.isGroup) {
        // 分组标签
        idx = this.allSelectedTags.findIndex(x => x.id === tag.id);
        if (idx === undefined || idx === -1) {
          return;
        }
        const removeTag = this.allSelectedTags[idx];
        this.allSelectedTags.splice(idx, 1);
        removeTag.checked = false;
        return;
      }
      // 非分组标签
      switch (tag.code) {
        case this.tagsCodeOnWeb.XinRen:
        case this.tagsCodeOnWeb.XfNengli:
        case this.tagsCodeOnWeb.XfDengJi:
        case this.tagsCodeOnWeb.NianLing:
          idx = this.allSelectedTags.findIndex(x => x.code === tag.code);
          break;
        default:
          idx = this.allSelectedTags.findIndex(x => x.id === tag.id);
          break;
      }
      if (idx !== undefined && idx !== -1) {
        const removeTag = this.allSelectedTags[idx];
        this.allSelectedTags.splice(idx, 1);
        switch (tag.code) {
          case this.tagsCodeOnWeb.XinRen:
            this.tagsRadioGroup.XinRen = undefined;
            break;
          case this.tagsCodeOnWeb.XfNengli:
            this.tagsRadioGroup.XfNengli = undefined;
            break;
          case this.tagsCodeOnWeb.XfDengJi:
            this.tagsRadioGroup.XfDengJi = undefined;
            break;
          case this.tagsCodeOnWeb.NianLing:
            this.tagsRadioGroup.NianLing = undefined;
            break;
          default:
            removeTag.checked = false;
            break;
        }
      }
    },
    onClickTagItem(tag) {
      const idx = this.allSelectedTags.findIndex(x => x.id === tag.id);
      if (tag.checked === true) {
        if (idx === -1) {
          this.allSelectedTags.push(tag);
        }
        return;
      } else {
        if (idx === -1) {
          return;
        }
        this.allSelectedTags.splice(idx, 1);
      }
    },
    onTagRadioChange(code) {
      if (!code) {
        return;
      }
      const idx = this.allSelectedTags.findIndex(x => x.code === code);
      if (idx >= 0) {
        this.allSelectedTags.splice(idx, 1);
      }
      let tmp = undefined;
      switch (code) {
        case this.tagsCodeOnWeb.XinRen:
          tmp = this.tagsXinRen.find(x => x.id === this.tagsRadioGroup.XinRen);
          break;
        case this.tagsCodeOnWeb.XfNengli:
          tmp = this.tagsXfNengli.find(x => x.id === this.tagsRadioGroup.XfNengli);
          break;
        case this.tagsCodeOnWeb.XfDengJi:
          tmp = this.tagsXfDengJi.find(x => x.id === this.tagsRadioGroup.XfDengJi);
          break;
        case this.tagsCodeOnWeb.NianLing:
          tmp = this.tagsNianLing.find(x => x.id === this.tagsRadioGroup.NianLing);
          break;
      }
      if (tmp) {
        this.allSelectedTags.push(tmp);
      }
    },
    loadAllKeepers: async function () {
      // 根据门店ID查询属于这个门店的所有用户
      // (不知道为啥有sid不用, 又新建了一个字段openId)
      await admApi
        .getSomeAdmins('', '', this.openId)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert('查询管家列表失败');
            return;
          }
          for (const k of res.data.data) {
            this.actKeepers.push({ value: k.id, label: k.username });
          }
        })
        .catch(err => {
          MessageBox.alert('查询管家列表失败');
        });
    },
    loadAllTags: async function () {
      this.clerkFilter.dataLoading = true;
      this.tagsXfDengJi.push({ id: 0, tag: '未定', code: this.tagsCodeOnWeb.XfDengJi });
      this.tagsXfDengJi.push({ id: 1, tag: 'C级', code: this.tagsCodeOnWeb.XfDengJi });
      this.tagsXfDengJi.push({ id: 2, tag: 'B级', code: this.tagsCodeOnWeb.XfDengJi });
      this.tagsXfDengJi.push({ id: 3, tag: 'A级', code: this.tagsCodeOnWeb.XfDengJi });
      this.tagsXfDengJi.push({ id: 4, tag: 'S级', code: this.tagsCodeOnWeb.XfDengJi });

      this.tagsNianLing.push({ id: 1, tag: '20岁以下', code: this.tagsCodeOnWeb.NianLing });
      this.tagsNianLing.push({ id: 2, tag: '20-30岁', code: this.tagsCodeOnWeb.NianLing });
      this.tagsNianLing.push({ id: 3, tag: '30-40岁', code: this.tagsCodeOnWeb.NianLing });
      this.tagsNianLing.push({ id: 4, tag: '40-50岁', code: this.tagsCodeOnWeb.NianLing });
      this.tagsNianLing.push({ id: 5, tag: '50-60岁', code: this.tagsCodeOnWeb.NianLing });
      this.tagsNianLing.push({ id: 6, tag: '60岁以上', code: this.tagsCodeOnWeb.NianLing });

      this.tagsXfNengli.push({ id: 0, tag: '超有钱', code: this.tagsCodeOnWeb.XfNengli });
      this.tagsXfNengli.push({ id: 1, tag: '有钱', code: this.tagsCodeOnWeb.XfNengli });
      this.tagsXfNengli.push({ id: 2, tag: '普通', code: this.tagsCodeOnWeb.XfNengli });
      this.tagsXfNengli.push({ id: 3, tag: '没钱', code: this.tagsCodeOnWeb.XfNengli });

      this.tagsXinRen.push({ id: 1, tag: '未破冰', code: this.tagsCodeOnWeb.XinRen });
      this.tagsXinRen.push({ id: 2, tag: '已破冰', code: this.tagsCodeOnWeb.XinRen });
      this.tagsXinRen.push({ id: 3, tag: '已信任', code: this.tagsCodeOnWeb.XinRen });

      const errAlertMsg = '查询标签失败';
      await tgpApi
        .getAllGroups()
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const groupTags = res.data.data; // 标签分组信息: List<{groupName:'', tags:['','']}>
          if (groupTags && groupTags.length > 0) {
            let id = -1;
            for (const gp of groupTags) {
              gp.id = id; // 分组标签, 兼容普通标签; 普通标签 id > 0, 分组标签将 id 设置为小于 0
              gp.count = 0;
              gp.isGroup = true; // 分组标签, 兼容普通标签
              gp.checked = false;
              gp.tag = gp.groupName; // 分组标签, 兼容普通标签
              id -= 1;
            }
          }
          actApi
            .getAllBaseTags(this.openId)
            .then(res => {
              if (res.data.status !== apiSts.ResponseOK) {
                MessageBox.alert('查询标签失败');
                return;
              }
              const tagsClerkCnt = res.data.data.tagsClerkCnt;
              this.tagsGroupList.splice(0, this.tagsGroupList.length);
              if (groupTags && groupTags.length > 0) {
                // 标签分组顾客数量累加
                groupTags.forEach(x => {
                  if (x.tags && x.tags.length > 0) {
                    for (const y of x.tags) {
                      const cnt = tagsClerkCnt[y];
                      if (cnt !== undefined && cnt > 0) {
                        x.count += cnt;
                      }
                    }
                  }
                  this.tagsGroupList.push(x);
                });
              }
              for (const k in res.data.data.gategoryTags) {
                if (!res.data.data.gategoryTags.hasOwnProperty(k)) {
                  continue;
                }
                const v = res.data.data.gategoryTags[k];
                if (v && v.length) {
                  v.forEach(x => {
                    const cnt = tagsClerkCnt[x.name];
                    if (cnt === undefined) {
                      x.count = 0;
                    } else {
                      x.count = cnt;
                    }
                  });
                }
                const key = Number.parseInt(k);
                switch (key) {
                  case TagGategory.TAG_1_100_XING_QU.id:
                    this.tagsXingQu.push(...v);
                    break;
                  case TagGategory.TAG_101_200_XF_NENG_LI.id:
                    break;
                  case TagGategory.TAG_101_200_XF_YI_YUAN.id:
                  case TagGategory.TAG_101_200_XF_CENG_JING.id:
                    this.tagsXiaoFei.push({ name: res.data.data.gategory[k], tags: v });
                    break;
                  case TagGategory.TAG_101_200_XF_DENG_JI.id:
                    break;
                  case TagGategory.TAG_1001_1100_XG_XING_DONG.id:
                  case TagGategory.TAG_1001_1100_XG_LUO_JI.id:
                  case TagGategory.TAG_1001_1100_XG_CE_LUE.id:
                  case TagGategory.TAG_1001_1100_XG_GAN_XING.id:
                  case TagGategory.TAG_1001_1100_XG_NENG_LIANG.id:
                    this.tagsXingGe.push({ name: res.data.data.gategory[k], tags: v });
                    break;
                }
              }
            })
            .finally(() => {
              this.clerkFilter.popMe = true;
              this.clerkFilter.dataLoading = false;
            });
        })
        .catch(err => {
          console.log('getGroupAllTags', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.clerkFilter.dataLoading = false;
        });
    },
    loadClerkList: async function () {
      if (this.clerkTable.dataListLoading) {
        return;
      }
      this.clerkTable.dataListLoading = true;
      // 所有已选择的标签的 name
      const selectTagNames = [];
      [this.tagsXiaoFei, this.tagsXingGe].map(t => {
        t.map(k => {
          for (const tag of k.tags) {
            if (tag.checked) {
              selectTagNames.push(tag.name);
            }
          }
        });
      });
      for (const tag of this.tagsXingQu) {
        if (tag.checked) {
          selectTagNames.push(tag.name);
        }
      }
      for (const tag of this.tagsGroupList) {
        if (tag.checked) {
          if (tag.tags && tag.tags.length > 0) {
            // 标签分组包含的所有标签
            tag.tags.forEach(x => {
              if (!selectTagNames.includes(x)) {
                selectTagNames.push(x);
              }
            });
          }
        }
      }
      const clerkTags = { tags: selectTagNames };
      clerkTags.birthdayMonth = this.tagsRadioGroup.birthdayMonth;
      clerkTags.xinRen = this.tagsRadioGroup.XinRen === undefined ? null : this.tagsRadioGroup.XinRen;
      clerkTags.xfNengli = this.tagsRadioGroup.XfNengli === undefined ? null : this.tagsRadioGroup.XfNengli;
      clerkTags.xfDengJi = this.tagsRadioGroup.XfDengJi === undefined ? null : this.tagsRadioGroup.XfDengJi;
      clerkTags.nianLing = this.tagsRadioGroup.NianLing === undefined ? null : this.tagsRadioGroup.NianLing;
      clerkTags.pageNumber = this.clerkTable.pageParam.page;
      clerkTags.pageSize = this.clerkTable.pageParam.limit;
      clerkTags.sid = this.openId;
      if (this.clerkTable.searchName) {
        clerkTags.cname = this.clerkTable.searchName;
      }

      const errAlertMsg = '查询顾客列表失败';
      await actApi
        .getClerkFilterByTags(clerkTags)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          if (res.data.data) {
            this.clerkTable.dataList = res.data.data.records;
            this.clerkTable.total = res.data.data.total;
          }
        })
        .catch(e => {
          console.log('getClerkFilterByTags', e);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.clerkTable.dataListLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
$font-family: 思源黑体 微软雅黑 Noto Sans SC-Medium;
$title-width: 100px;
$tag-height: 17px;
$tag-line-height: 17px;

::v-deep .el-table td {
  padding: 5px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.page {
  position: relative;
  width: 100%;
  height: 1920px;
  padding: 5px 10px 0 10px;
  font-family: $font-family;
  background-color: #f8f8fa;
  border-radius: 0px 0px 0px 0px;

  .context {
    width: 100%;
    padding: 5px 10px 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .title_1 {
    font-family: $font-family;
    font-size: 20px;
    font-weight: bold;
    line-height: 22px;
    letter-spacing: 0px;
    font-variation-settings: 'opsz' auto;
    color: #724eff;
    letter-spacing: 1px;
  }

  .title_1_ctx1 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    .title_1_ctx1_1 {
      display: block;
      text-align: left;

      .act_times {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .title_1_ctx1 tr {
    margin-top: 5px;
  }

  .title_1_ctx2 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }

  .title_2 {
    width: $title-width;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;

    .title_icon {
      width: 4px;
      height: 13px;
      background: #766aff;
      background-position: left bottom;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .title_name {
      font-family: $font-family;
      font-size: 16px;
      font-weight: 550;
      line-height: 22px;
      letter-spacing: 0px;
      font-variation-settings: 'opsz' auto;
      color: #333333;
      letter-spacing: 1px;

      .no_flex {
        display: inline;
        margin-left: 15px;
      }
    }
  }
}

.tag_class {
  width: $title-width;
  font-size: 14px;
  font-weight: 550;
  line-height: 17px;
  letter-spacing: 0px;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #333333;
  letter-spacing: 1px;
}

.tag_list {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.tag_item {
  margin: 0 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.tag_name {
  width: auto;
  height: $tag-height;
  line-height: $tag-line-height;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 17px;
  letter-spacing: 0px;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #666666;
}

.tag_selected {
  background: #f5f5f5;
  padding: 3px 3px 3px 3px;
}

.tag_count {
  color: #766aff;
  padding: 5px 5px 3px 5px;
  background: #ebebff;
  border-radius: 3px 3px 3px 3px;
}

.act_info td {
  width: 35%;
  vertical-align: top;
}

.commit {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
